<template>
  <div id="app" ref="com" >
    <!-- <BlobalCom></BlobalCom> -->
    <!-- <input type="text" ref="search"  />
    <input type="text" value="1234" ref="aaa" /> -->
    <!-- <Blobal-com></Blobal-com> -->
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld ref="com"  msg="Welcome to Your Vue.js App"/> -->
    <button  @click="fun1()">点我1</button>
        <project ref="display"></project>
    <button  @click="fun(true)">现实</button>
    <button class="c"  @click="fun(false)">隐藏</button>
        <div v-if="show">
          <showModel></showModel>
        </div>
    
    </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import project from './components/project.vue'
import showModel from './components/showModel.vue'
// import { fun1 } from './utils/common'

export default {
  name: 'App',
  components: {
    // HelloWorld,
    project,
    showModel
  },
  data(){
    return {
      show:false
    }
  },
  created(){
    // fun1();
  },
  mounted(){
    // console.log(this.$refs)
    // console.log('oss-src',this.$refs)
    // console.log(this.$refs.aaa.value)
    // console.log(this)
    // this.$refs.com.fun();//调用组件的方法
    this.$refs.display.fun();
  },
  
  methods:{
    fun1(){
      this.$refs.display.fun1();
    },
    fun(bool){
      this.show = bool
    }
  }
}
</script>

<style>
#app{
  width: 100%;
  height: 700px;
  margin: auto;
  text-align: center;
}
.c{
  position: fixed;
  z-index: 999;
}

</style>
